<template>
    <div>
        <el-form :inline="true" ref="form" :model="form" :rules="rules" class="detail-form" label-width="110px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="计划编号：">
                        {{ form.shipPlanNo }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船名：" prop="shipName">
                        {{ form.shipName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="航次：" prop="voyage">
                        {{ form.voyage }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业港口：" prop="portCode">
                        {{ form.portName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="计划类型：" prop="planType">
                        {{ form.planType | _filterShipPlanType }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业状态：" prop="planStatus">
                        {{ form.planStatus | _filterShipPlanStatus }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="完成日期：">
                        {{ form.taskTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="数据来源：">
                        {{ form.planFrom }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建时间：">
                        {{ form.createDateTime }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="封航日期：">
                        {{ form.closeTime | filterDate }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="封航时间：">
                        {{ form.closeTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="封航人：">
                        {{ form.closeUser }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="理箱TEU：">
                        {{ form.tallyTeu }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="放行TEU：">
                        {{ form.passTeu }}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="border-line-dashed mt-10 mb-10"></div>
        <el-form :inline="true" :model="condition" class="search-form" label-width="80px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱号">
                        <el-input v-model="condition['search_LIKE_containerId']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱型">
                        <autoSearchEntrust v-model="condition['search_LIKE_containerType']"
                                           :name="condition['search_LIKE_containerType']"></autoSearchEntrust>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="尺寸">
                        <autoSearchSize v-model="condition['search_EQ_containerSize']"></autoSearchSize>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="内外贸">
                        <el-select v-model="condition['search_EQ_tradeType']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictTradeType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="空重">
                        <el-select v-model="condition['search_EQ_ef']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictIfHeavyType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船代">
                        <auto-search-custom @selectName="v=>condition['search_LIKE_shipAgentName']=v"
                                            :isShipAgent="true"></auto-search-custom>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="中转">
                        <el-select v-model="condition['search_EQ_change']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictOneOrZero" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-button type="primary" class="ml-80" @click="loadData">查 询</el-button>
                    <el-button @click="handleExport">导出Excel</el-button>
                    <el-button @click="dialogFee = true">拆提封航</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-row type="flex" justify="end" class="mt-10">
            <el-col :span="16" style="display: flex;justify-content: space-between">
                <title-point color="#30C8CA">
                    <div slot="content">
                        总箱量 :
                        <span style="font-size: 16px">{{ list.length }}</span>
                    </div>
                </title-point>
                <title-point color="#449DFF">
                    <div slot="content">
                        海关放行 :
                        <span style="font-size: 16px;margin-right: 10px">{{ isSendCustoms }}</span>
                        未放行 :
                        <span style="font-size: 16px">{{ noSendCustoms }}</span></div>
                </title-point>
                <title-point color="#50B155">
                    <div slot="content">
                        拆提放行 :
                        <span style="font-size: 16px;margin-right: 10px">{{ isPass }}</span>
                        未放行 :
                        <span style="font-size: 16px">{{ noPass }}</span></div>
                </title-point>
            </el-col>
        </el-row>
        <el-table :data="list" border stripe max-height="500" class="mt-10">
            <el-table-column type="index" fixed="left" align="center" label="序号" width="55"></el-table-column>
            <el-table-column prop="containerId" label="箱号"  min-width="120">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="handleDetail(scope.row)">
                        {{ scope.row.containerId }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="80"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="80"></el-table-column>
            <el-table-column prop="tradeType" label="内外贸"  min-width="100">
                <template slot-scope="scope">
                    {{ scope.row.tradeType | _filterTradeType }}
                </template>
            </el-table-column>
            <el-table-column prop="ef" label="空重"  min-width="80">
                <template slot-scope="scope">
                    {{ scope.row.ef | _filterIfHeavyType }}
                </template>
            </el-table-column>
            <el-table-column prop="change" label="中转"  min-width="80">
                <template slot-scope="scope">
                    {{ scope.row.change | _filterIsChange }}
                </template>
            </el-table-column>
            <el-table-column prop="enchaseWay" label="装箱方式"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.enchaseWay | _filterEnchaseWayType }}
                </template>
            </el-table-column>
            <el-table-column prop="sealNo" label="铅封号"  min-width="100"></el-table-column>
            <el-table-column prop="billNumber" label="提单号"  min-width="140"></el-table-column>
            <el-table-column prop="cargoName" label="货名"  min-width="80"></el-table-column>
            <el-table-column prop="cargoCount" label="件数"  min-width="80"></el-table-column>
            <el-table-column prop="cargoWeight" label="货重"  min-width="80"></el-table-column>
            <el-table-column prop="containerWeight" label="箱货重"  min-width="100"></el-table-column>
            <el-table-column prop="isDamaged" label="残损"  min-width="100">
                <template slot-scope="scope">
                    {{ scope.row.isDamaged | _filterTrueOrFalse }}
                </template>
            </el-table-column>
            <el-table-column prop="isSendCustoms" label="海关放行"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.isSendCustoms | _filterIsDamagedType }}
                </template>
            </el-table-column>
            <el-table-column prop="isPass" label="拆提放行"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.isPass | _filterIsDamagedType }}
                </template>
            </el-table-column>
            <el-table-column prop="shipAgentName" label="船代"  min-width="140"></el-table-column>
            <el-table-column prop="accountUnit" label="付费单位"  min-width="120"></el-table-column>
            <el-table-column prop="tallyClerk" label="理货人"  min-width="110"></el-table-column>
            <el-table-column prop="tallyTime" label="理货时间"  min-width="160"></el-table-column>
        </el-table>
        <el-dialog title="拆提封航" :visible.sync="dialogFee" width="400px">
            <el-row type="flex" justify="center" class="mt-20">
                <el-date-picker v-model="closeTime" value-format="yyyy-MM-dd" type="date"
                                placeholder="选择拆提封航日期"></el-date-picker>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogFee = false">取 消</el-button>
                <el-button type="primary" @click="handleFee" :loading="$store.getters.loadingBtn">确 认</el-button>
            </span>
        </el-dialog>
        <ship-load-form v-if="dialogForm" :id="id" ref="shipLoadForm" @load="loadData"></ship-load-form>
        <fee-detail-form ref="feeDetailForm"></fee-detail-form>
    </div>
</template>

<script>
    import {
        getShipPlanId,
        getShipPlanIdList,
        getShipPlanList,
        postFeeClose,
        shipTallyReleaseId
    } from "@/api/shipPlan/shipPlan";
    import autoSearchShip from '@/components/autocomplete/autoSearchShip'
    import autoSearchSize from '@/components/autocomplete/autoSearchSize'
    import autoSearchEntrust from "@/components/autocomplete/autoSearchEntrust";
    import autoSearchCustom from '@/components/autocomplete/autoSearchCustom'
    import shipLoadForm from './shipLoadForm'
    import { newExportExcel } from "@/utils/newExport";
    import { ifHeavyType, tradeType, isChange, enchaseWayType, isDamagedType } from "../../../assets/dict";
    import titlePoint from '../common/title-point'
    import feeDetailForm from './feeDetailForm'

    export default {
        name: "拆提封航",
        components: {
            autoSearchShip, autoSearchSize, autoSearchEntrust, autoSearchCustom, shipLoadForm, titlePoint, feeDetailForm
        },
        data() {
            return {
                id: '',
                form: {},
                rules: {},
                condition: {
                    search_EQ_ef: 'F',
                    search_EQ_tradeType: 'O',
                    search_EQ_isPass:'1'
                },
                list: [],
                dialogForm: false,
                dialogFee: false,
                closeTime: '',
                isSendCustoms: 0,
                noSendCustoms: 0,
                isPass: 0,
                noPass: 0,
                created:true,
            }
        },
        mounted() {
            console.log(1)
            if(this.created){
                this.getData()
            }
        },
        activated() {
            console.log(2)
            if(!this.created){
                this.getData()
            }
        },
        methods: {
            handleDetail(item) {
                console.log(item)
                shipTallyReleaseId(item.tallyDetailId).then(res => {
                    console.log(res)
                    this.$refs.feeDetailForm.list = res.data.tallyDetails
                    this.$refs.feeDetailForm.form = res.data
                    // if(res.data.aaData.length>0){
                    //     this.$refs.feeDetailForm.form['accountWay'] = res.data.aaData[0].accountWay
                    //     this.$refs.feeDetailForm.form['accountUnit'] = res.data.aaData[0].accountUnit
                    //     this.$refs.feeDetailForm.form['passUser'] = res.data.aaData[0].passUser
                    //     this.$refs.feeDetailForm.form['passTime'] = res.data.aaData[0].passTime
                    // }
                    this.$refs.feeDetailForm.dialogForm = true
                })
            },
            handleFee() {
                let data = {
                    closeTime: this.closeTime
                }
                postFeeClose(this.id, data).then(res => {
                    this.$message({ message: '拆提封航成功!', type: 'success' })
                    setTimeout(() => {
                        this.handleBack()
                    }, 1000)
                })
            },
            loadData() {
                getShipPlanId(this.id).then(res => {
                    this.form = res.data
                    let params = this.$assist.copySearchConditions(this.condition)
                    getShipPlanIdList(this.id, params).then(response => {
                        this.created=false
                        if (res.data) {
                            this.list = response.data.aaData
                            this.isSendCustoms = 0
                            this.noSendCustoms = 0
                            this.isPass = 0
                            this.noPass = 0
                            this.list.forEach(f => {
                                if (f.isSendCustoms === '1') {
                                    this.isSendCustoms = this.isSendCustoms + 1
                                }
                                if (f.isSendCustoms === '0') {
                                    this.noSendCustoms = this.noSendCustoms + 1
                                }
                                if (f.isPass === '1') {
                                    this.isPass = this.isPass + 1
                                }
                                if (f.isPass === '0') {
                                    this.noPass = this.noPass + 1
                                }
                            })
                        } else {
                            this.list.splice(0, this.list.length)
                        }
                    })
                })
            },
            getData() {
                this.id = sessionStorage.getItem('feeId')
                if (this.id) {
                    this.loadData()
                } else {
                    this.handleBack()
                }
            },
            handleBack() {
                const view = { path: `/work/shipPlan/fee`, name: '拆提封航' }
                this.$store.dispatch('delVisitedViews', view).then((views) => {
                    if (view.path === this.$route.path) {
                        const latestView = views.slice(-1)[0]
                        if (latestView) {
                            this.$router.push(latestView.path)
                        } else {
                            this.$router.push({ path: '/work/shipPlan/unload', name: '卸船计划列表' })
                        }
                    } else {
                        this.$message({ message: '服务器错误!', type: 'error' })
                    }
                })
            },
            handleExport() {
                let map = new Map();
                map.set("containerId", "箱号")
                map.set("containerType", "箱型")
                map.set("containerSize", "尺寸")
                map.set("tradeType", "内外贸")
                map.set("ef", "空重")
                map.set("change", "中转")
                map.set("enchaseWay", "装箱方式")
                map.set("sealNo", "铅封号")
                map.set("billNumber", "提单号")
                map.set("cargoName", "货名")
                map.set("cargoCount", "件数")
                map.set("cargoWeight", "货重")
                map.set("containerWeight", "箱货重")
                map.set("isDamaged", "残损")
                map.set("isSendCustoms", "海关放行")
                map.set("isPass", "拆提放行")
                map.set("shipAgentName", "船代")
                map.set("accountUnit", "付费单位")
                map.set("tallyUser", "理货人")
                map.set("tallyTime", "理货时间")
                let exportRecords = [];
                let exportArr = JSON.parse(JSON.stringify(this.list));
                exportArr.forEach(record => {
                    let exportRecord = {};
                    for (let [key, value] of map.entries()) {
                        if (key === "ef") {
                            record[key] = ifHeavyType.get(record[key]);
                        }
                        if (key === "tradeType") {
                            record[key] = tradeType.get(record[key]);
                        }
                        if (key === "change") {
                            record[key] = isChange.get(record[key]);
                        }
                        if (key === "enchaseWay") {
                            record[key] = enchaseWayType.get(record[key]);
                        }
                        if (key === "isDamaged") {
                            record[key] = isDamagedType.get(record[key]);
                        }
                        if (key === "isSendCustoms") {
                            record[key] = isDamagedType.get(record[key]);
                        }
                        if (key === "isPass") {
                            record[key] = isDamagedType.get(record[key]);
                        }
                        exportRecord[value] = record[key];
                    }
                    exportRecords.push(exportRecord);
                });
                newExportExcel("拆提封航", exportRecords);
            }
        },
        watch: {
            dialogFee(bool) {
                if (!bool) {
                    this.closeTime = ''
                }
            }
        },
        filters: {
            filterDate(val) {
                return val ? val.substr(0, 10) : '-'
            }
        }
    }
</script>

<style scoped>

</style>
